<template>
  <div class="homeMain">
    <el-row :span="24" class="viewHeader">
      <div class="user clearfix">
        <div class="userimg fl">
        </div>
        <div class="userinfo fl">
          <p>账号：{{userInfo.userID}}</p>
          <span v-if="userInfo.level===3"><i class="el-icon-star-on"></i>&nbsp;区域代理商</span>
          <span v-else-if="userInfo.level===1"><i class="el-icon-star-on"></i>&nbsp;消费商</span>
          <span v-else-if="userInfo.level===2"><i class="el-icon-star-on"></i>&nbsp;经销商</span>
          <span v-else><i class="el-icon-star-on"> &nbsp;</i>消费者</span>
        </div>
      </div>
    </el-row>
    <el-row :span="24" class="viewContent">
      <el-tabs v-model="tabActive" @tab-click="tabClick" class="tabs">
        <el-tab-pane name="product">
         <span slot="label">产品套餐</span>
        </el-tab-pane>
        <!-- <el-tab-pane>
         <span slot="label"> <p>121</p><p>分销商</p></span>
        </el-tab-pane>
        <el-tab-pane>
         <span slot="label"><p>100</p><p>区域业绩</p></span>
        </el-tab-pane> -->
        <el-tab-pane name="order">
         <span slot="label">我的订单</span>
        </el-tab-pane>
      </el-tabs>
      <!-- 子路由视口 -->
      <router-view></router-view>
    </el-row>
    <el-row :span="24" class="viewFooter">
     <foot-nav></foot-nav>
    </el-row>
  </div>
</template>

<script>
import footNav from '../common/footerNav'
import {loadFromSession} from '../common/sessionStorage'
export default {
  components: {
    footNav, loadFromSession
  },
  created () {
    // this.userInfo = this.$store.state.user
    // 用户鉴权
    if (loadFromSession('setToken') === undefined || loadFromSession('setUser') === undefined) {
      window.location.href = ''
    }
    let user = loadFromSession('setUser')
    let token = loadFromSession('setToken')
    let title = loadFromSession('setTitle')
    this.$store.dispatch('setUser', user)
    this.$store.dispatch('setToken', token)
    this.$store.dispatch('setTitle', title)
  },
  data () {
    return {
      tabActive: this.$store.state.tab
    }
  },
  computed: {
    userInfo: function () {
      return this.$store.state.user
    }
  },
  methods: {
    tabClick (val) {
      console.log(val.index)
      // this.$router.push(['/home/distributeProduct', '/home/distributor', '/home/performance', '/home/homeorder'][val.index])
      this.$router.push(['/home/distributeProduct', '/home/homeorder'][val.index])
    },
    toRegister () { // 跳转到注册
      this.$router.push('/register')
    }
  },
  mounted () {
    this.$store.dispatch('setTab', 'product')
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.homeMain {
  .viewHeader {
    height: 152px;
    // background-color: #05D26B;
    padding:15px;
    background: url('../../assets/imgs/bg.png') center center no-repeat;
        background-size: cover;
    .user{
      // border-bottom:1px solid #fff;
      padding-top: 30px;
    .userimg{
      width: 65px;
      height: 65px;
      border-radius: 50%;
      overflow: hidden;
      background: url('../../assets/imgs/logo.png') center  -7px no-repeat;
      background-size: cover;
    }
    .userinfo{
      color: #fff;
      font-size: 14px;
      line-height: 30px;
      text-align: left;
      margin-left: 30px;
      span{
        background-color:#0DB85C;
        border-radius: 10px;
        padding: 2px 8px;
      }
      }
    }
  }
  .viewContent {
    .tabs .el-tabs__nav{
      width: 100%;
    }
    .tabs .el-tabs__header{
      margin: 0
    }
    .tabs .el-tabs__item{
      height: 50px;
      padding-top: 5px;
      width: 50%;
      color:#000;
    }
   .tabs .el-tabs__item.is-active{
      color:#0DB85C;
    }
   .tabs .el-tabs__active-bar{
      background-color: #0DB85C;
    }
    p{
      line-height:25px;
    }
  }
  .viewFooter {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
